﻿<UserControl x:Class="DataVisualizationDemos.TreeMapIntroduction"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:local="clr-namespace:DataVisualizationDemos">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style x:Key="ContainerStyle" TargetType="Panel">
                <Setter Property="Margin" Value="8"/>
            </Style>
            <Style x:Key="TitleStyle" TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
            <LinearGradientBrush x:Key="GradientOverlay">
                <GradientStop Color="#55ffffff" Offset="0"/>
                <GradientStop Color="#00ffffff" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Resources>

        <!-- Simple visualization of one variable -->
        <local:DockPanel
            Grid.Column="0"
            Grid.Row="0"
            Style="{StaticResource ContainerStyle}">
            <TextBlock
                local:DockPanel.Dock="Top"
                Text="All Posts by Popularity"
                Style="{StaticResource TitleStyle}"/>
            <datavis:TreeMap
                x:Name="AllPosts"
                ItemsSource="{Binding}">
                <datavis:TreeMap.ItemDefinition>
                    <datavis:TreeMapItemDefinition
                        ValueBinding="{Binding Popularity}">
                        <DataTemplate>
                            <Grid>
                                <Border
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    Background="#ff7fc3ff"
                                    Margin="0 0 1 1">
                                    <Grid Background="{StaticResource GradientOverlay}">
                                        <controls:Viewbox Margin="3 0 3 0">
                                            <TextBlock Text="{Binding FormattedDate}"/>
                                        </controls:Viewbox>
                                    </Grid>
                                    <ToolTipService.ToolTip>
                                        <StackPanel>
                                            <TextBlock Text="{Binding Title}"/>
                                            <TextBlock Text="{Binding FormattedTags}" FontStyle="Italic"/>
                                            <TextBlock Text="{Binding FormattedDate}"/>
                                        </StackPanel>
                                    </ToolTipService.ToolTip>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </datavis:TreeMapItemDefinition>
                </datavis:TreeMap.ItemDefinition>
            </datavis:TreeMap>
        </local:DockPanel>

        <!-- Visualization of two variables -->
        <local:DockPanel
            Grid.Column="1"
            Grid.Row="0"
            Style="{StaticResource ContainerStyle}">
            <TextBlock
                local:DockPanel.Dock="Top"
                Text="10 Latest Posts by Popularity/Length"
                Style="{StaticResource TitleStyle}"/>
            <datavis:TreeMap
                x:Name="RecentPosts"
                ItemsSource="{Binding}">
                <datavis:TreeMap.Interpolators>
                    <datavis:SolidColorBrushInterpolator
                        TargetName="Border"
                        TargetProperty="Background"
                        DataRangeBinding="{Binding Length}"
                        From="#ffeeeeff"
                        To="#ff8080ff"/>
                </datavis:TreeMap.Interpolators>
                <datavis:TreeMap.ItemDefinition>
                    <datavis:TreeMapItemDefinition
                        ValueBinding="{Binding Popularity}">
                        <DataTemplate>
                            <Grid>
                                <Border
                                    x:Name="Border"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    Margin="0 0 1 1">
                                    <Grid Background="{StaticResource GradientOverlay}">
                                        <TextBlock
                                            Text="{Binding ShortTitle}"
                                            TextWrapping="Wrap"
                                            FontSize="10"
                                            VerticalAlignment="Center"
                                            Margin="2"/>
                                    </Grid>
                                    <ToolTipService.ToolTip>
                                        <StackPanel>
                                            <TextBlock Text="{Binding Title}"/>
                                            <TextBlock Text="{Binding FormattedTags}" FontStyle="Italic"/>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Length}"/>
                                                <TextBlock Text=" characters"/>
                                            </StackPanel>
                                            <TextBlock Text="{Binding FormattedDate}"/>
                                        </StackPanel>
                                    </ToolTipService.ToolTip>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </datavis:TreeMapItemDefinition>
                </datavis:TreeMap.ItemDefinition>
            </datavis:TreeMap>
        </local:DockPanel>

        <!-- Visualization of a Linq-aggregated variable -->
        <local:DockPanel
            Grid.Column="0"
            Grid.Row="1"
            Style="{StaticResource ContainerStyle}">
            <TextBlock
                local:DockPanel.Dock="Top"
                Text="Tags by Number of Posts"
                Style="{StaticResource TitleStyle}"/>
            <datavis:TreeMap
                x:Name="ByTag"
                ItemsSource="{Binding}">
                <datavis:TreeMap.ItemDefinition>
                    <datavis:TreeMapItemDefinition
                        ValueBinding="{Binding Posts.Length}">
                        <DataTemplate>
                            <Border
                                Background="#ff90f070"
                                BorderBrush="Black"
                                BorderThickness="1">
                                <Grid Background="{StaticResource GradientOverlay}">
                                    <Grid
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Tag}" FontStyle="Italic"/>
                                    </Grid>
                                </Grid>
                                <ToolTipService.ToolTip>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Tag}"/>
                                        <TextBlock Text=": "/>
                                        <TextBlock Text="{Binding Posts.Length}"/>
                                        <TextBlock Text=" posts"/>
                                    </StackPanel>
                                </ToolTipService.ToolTip>
                            </Border>
                        </DataTemplate>
                    </datavis:TreeMapItemDefinition>
                </datavis:TreeMap.ItemDefinition>
            </datavis:TreeMap>
        </local:DockPanel>

        <!-- Visualization of aggregated data and sub-TreeMaps -->
        <local:DockPanel
            Grid.Column="1"
            Grid.Row="1"
            Style="{StaticResource ContainerStyle}">
            <TextBlock
                local:DockPanel.Dock="Top"
                Text="Tags by Number of Posts/Popularity"
                Style="{StaticResource TitleStyle}"/>
            <datavis:TreeMap
                x:Name="ByTagDetailed"
                ItemsSource="{Binding}"
                BorderBrush="Black"
                BorderThickness="0 0 2 2">
                <datavis:TreeMap.ItemDefinition>
                    <datavis:TreeMapItemDefinition
                        ValueBinding="{Binding Posts.Length}">
                        <DataTemplate>
                            <Border
                                BorderBrush="Black"
                                BorderThickness="2 2 0 0"
                                Canvas.ZIndex="1">
                                <Grid>
                                    <datavis:TreeMap
                                        ItemsSource="{Binding Posts}">
                                        <datavis:TreeMap.ItemDefinition>
                                            <datavis:TreeMapItemDefinition
                                                ValueBinding="{Binding Popularity}">
                                                <DataTemplate>
                                                    <Border
                                                        BorderBrush="Gray"
                                                        BorderThickness="1 1 0 0"
                                                        Background="#ffefb028"
                                                        ToolTipService.ToolTip="{Binding Title}">
                                                        <Grid Background="{StaticResource GradientOverlay}">
                                                            <controls:Viewbox Margin="3 0 3 0">
                                                                <TextBlock
                                                                    Text="{Binding FormattedDate}"
                                                                    FontFamily="Arial"/>
                                                            </controls:Viewbox>
                                                        </Grid>
                                                    </Border>
                                                </DataTemplate>
                                            </datavis:TreeMapItemDefinition>
                                        </datavis:TreeMap.ItemDefinition>
                                    </datavis:TreeMap>
                                    <Border
                                        Background="#c0ffffff"
                                        CornerRadius="5"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center">
                                        <TextBlock
                                            Text="{Binding Tag}"
                                            FontSize="18"
                                            FontStyle="Italic"
                                            FontWeight="Bold"
                                            FontFamily="Arial"
                                            Margin="3"
                                            ToolTipService.ToolTip="{Binding Tag}"/>
                                    </Border>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </datavis:TreeMapItemDefinition>
                </datavis:TreeMap.ItemDefinition>
            </datavis:TreeMap>
        </local:DockPanel>
    </Grid>
</UserControl>
